<!doctype html>
<html>
<head>
<script src="../src/cge.js"></script>
<script src="../src/fps.js"></script>
<script src="../src/canvas.js"></script>
<script src="../src/image.js"></script>
<script src="../src/gradient.js"></script>
<script src="../src/angles.js"></script>
<script src="../src/map.js"></script>
<script src="../src/key.js"></script>

<script>
function init ()
{
	function _wait ( cback )
	{
		if ( CGE.ready () ) 
			cback ();
		else
			setTimeout ( function () { _wait ( cback ); }, 500 );
	}

	CGE.map_handler.add ( "resources/simple.png", 128, 128, "bg1" );

	CGE.canvas_handler.add ( "screen", 400, 350 );

	_wait ( app_start );
}

function app_start ()
{
	console.debug ( "APP START" );

	var c = CGE.canvas_handler.get ( "screen" );
	
	c.render ( "dest_canvas" );
	c.color_clear = "#ffffff";

	var gr = CGE.gradient_handler.add ( "v", "background", 600 );

	gr.add ( 0, "#000044" );
	gr.add ( 1, "#3333cc" );

	var m = CGE.map_handler.get ( "bg1" );

	m.set_map ( 
		[
			[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 1 ],
			[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 ]
		]
	)

	CGE.keys.add ( CGE.KEY_CURSOR_LEFT, function ( evt ) { _x_delta = -3; }, function ( evt ) { _x_delta = 0; } );
	CGE.keys.add ( CGE.KEY_CURSOR_RIGHT, function ( evt ) { _x_delta = 3; }, function ( evt ) { _x_delta = 0; } );
	CGE.keys.add ( CGE.KEY_CURSOR_UP, function ( evt ) { _y_delta = -3; }, function ( evt ) { _y_delta = 0; } );
	CGE.keys.add ( CGE.KEY_CURSOR_DOWN, function ( evt ) { _y_delta = 3; }, function ( evt ) { _y_delta = 0; } );
	CGE.keys.listen ( true );

	m.set_view_offset ( 3, 3 );
	m.redraw ();


	CGE.render ( render, 50 );
}

var _x_delta = 0, _y_delta = 0;
function render ()
{
	var m = CGE.map_handler.get ( "bg1" );
	var g = CGE.gradient_handler.get ( "background" );

	g.blit ( 0,0, 800, 600 );

	m.blit ()

	m.add ( _x_delta, _y_delta );
}
</script>
</head>
<body onload="init()">

<div id="dest_canvas" style="border: 2px dotted black; padding: 8px; float: left;"></div>


</body>
</html>
